<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="static/js/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>已放款页面</title>
</head>
<style>
    .upload-demo{
        width: 200px;
    }
</style>
<body>
<!--   条件查询部分-->
    <div id="txt">
        <el-row>
            <el-col :span="6">
                订单编号:<el-input  size="mini" v-model="inp.orderid" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
            <el-col :span="6">
                客户姓名:<el-input  size="mini" v-model="inp.clientName" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
            <el-col :span="6">
                客户电话:<el-input  size="mini" v-model="inp.clientPhone" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
            <el-col :span="6">
                订单状态:<el-input  size="mini" v-model="inp.orderStatus" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col :span="6">
                还款方式:<el-input  size="mini" v-model="inp.refundType" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
            <el-col :span="6">
                渠道筛选:<el-input  size="mini" v-model="inp.ditch" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
            <el-col :span="6">
                负责人员:<el-input  size="mini" v-model="inp.username" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
            <el-col :span="6">
                申请额度:<el-input  size="mini" v-model="inp.money" style="width: 160px;" placeholder="请输入"></el-input>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-button  type="primary"  size="small" icon="el-icon-search"  @click="show">查询</el-button>
            <el-button  size="small" @click="exportfile()"  type="primary">导出<i class="el-icon-download el-icon--right"></i></el-button>
            <el-button  size="small" @click="exportall()"  type="primary">全部导出<i class="el-icon-download el-icon--right"></i></el-button>
            <el-button  @click="dialogFormVisible = true" size="small"  type="success" ><span>批量催收</span></el-button>

            <el-dialog title="批量催收" :visible.sync="dialogFormVisible" :before-close="handleClose">
                <el-form>
                    <el-form-item label="催收人员" :label-width="formLabelWidth">
                        <el-select value-key="id" v-model="uid" placeholder="请选择催收人员">
                            <el-option v-for="user in users"
                                  :key="user.id"
                                  :label="user.userName"
                                  :value="user.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false,showuid()">确 定</el-button>
                </div>

            </el-dialog>
        </el-row>
    </div>
<br>
<!--    //表格显示部分-->
<div id="app">
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%;"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                @selection-change="handleSelectionChange"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    type="selection"
                    width="50px">
            </el-table-column>
            <el-table-column
                    label="序号"
                    type="index"
                    width="50px">
            </el-table-column>
            <el-table-column
                    prop="orderid"
                    label="订单编号"
                    width="90px">
            </el-table-column>
            <el-table-column
                    prop="productName"
                    label="产品名称"
                    width="90px">
            </el-table-column>
            <el-table-column
                    prop="clientName"
                    label="客户姓名"
                    width="90px">
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="申请金额"
                    width="90px">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="订单状态"
                    width="90px">
                <template slot-scope="scope">
                    <span v-if="(scope.row.status=='逾期中') || (scope.row.status=='已催收')" style="color:#de0d0d">{{scope.row.status}}</span>
                    <span v-else style="color:#2d2222">{{scope.row.status}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="duedays"
                    label="逾期天数"
                    width="90px">
            </el-table-column>
            <el-table-column
                    prop="orderTime"
                    label="下单时间"
                    :formatter="formatter"
                    width="90px">
            </el-table-column>
            <el-table-column
                    prop="refundType"
                    label="还款方式"
                    width="90px">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="负责人员"
                    width="100px">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="153px">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary"  size="mini"><span>查看</span></el-button>
                    <el-button @click="collection(scope.row)" v-if="scope.row.status=='逾期中'" type="success" size="mini"><span>催收</span></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <br>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </template>
</div>
</body>
<script>
    //条件组件
    var txt=new Vue({
        el:"#txt",
        data:{
            formLabelWidth: '120px',
            dialogFormVisible: false,
            users:[],
            uid:null,
            inp:{
                orderid:null,
                clientName:null,
                clientPhone:null,
                orderStatus:null,
                refundType:null,
                ditch:null,
                orderTime:null,
                money:null,
                username:null,
            }
        },

        methods:{
            showuid:function(){
                var rows=app.multipleSelection;
                var cansend=true;
                //判断是否选了行数
                if(rows.length==0){
                    alert("请至少选中一行催收数据");
                }else{
                    //判断是否选中了不是"逾期中"
                    for(j = 0; j < rows.length; j++) {
                        rows[j]["userid"]=txt.uid;
                        if(rows[j].status!="逾期中"){
                            cansend=false;
                        }
                    }
                    if(cansend){
                        //拿着该id以及选项值去后台
                        axios({
                                url:"loan/callloans",
                                method:"post",
                                data:JSON.stringify(rows),
                                headers:{
                                    'Content-Type':'application/json'  //如果写成contentType会报错
                                }
                            }
                        ).then(function (msg) {
                            alert(msg.data.msg);
                            //重新加载表格
                            app.search();
                        })
                    }else{
                        alert("只能催收逾期中的账单!");
                    }
                }

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            filesuccess(response){
                if(response.code==200){
                    alert(response.msg);
                }else{
                    alert("文件上传失败!请按照给定格式上传文件");
                }
            },
            show:function () {
              //设置默认的pageNum和limit，当前页码和每页条数
              txt.inp["pageNum"]=1;
              txt.inp["limit"]=10;
              txt.inp["status"]=2;
              txt.inp["level"]="e";
              //触发则根据条件发送axios查询
              axios({
                      url:"loan/getLoans",
                      method:"post",
                      data:JSON.stringify(txt.inp),
                      headers:{
                          'Content-Type':'application/json'  //如果写成contentType会报错
                      }
                  }
              ).then(function (msg) {
                  //给表格赋值
                  app.tableData=msg.data.data;
                  //赋值总数
                  app.total= parseInt(msg.data.msg);
              })
          },
            exportfile:function () {
                //文件导出
                alert("导出当前页");
                //获取当前查询条件
                alert(JSON.stringify(txt.inp));
                //设置limit和pagenums，
                txt.inp["pageNum"]=app.currentPage;   //inp是我页面八个输入框的条件值，在txt组件中，js中obj[“key”]=value就是为对象添加属性并且赋值；
                txt.inp["limit"]=app.pagesize;
                txt.inp["status"]=2;
                txt.inp["level"]="e";
                //将当前的查询条件交给后台查询全部信息，
                this.doexport(txt.inp);

            },
            exportall:function(){
                alert("全部导出")
                //获取当前查询条件
                //设置limit和pagenums为零，作为信号告诉后台不使用pagehelper
                txt.inp["pageNum"]=0;   //inp是我页面八个输入框的条件值，在txt组件中，js中obj[“key”]=value就是为对象添加属性并且赋值；
                txt.inp["limit"]=0;
                txt.inp["status"]=2;
                txt.inp["level"]="e";
                //将当前的查询条件交给后台查询全部信息，
                this.doexport(txt.inp);
            },
            doexport(obj){
                alert("obj="+obj);
                //将当前页面的条件交给后台
                axios({
                    url:"poi/gettabledata",
                    method:"post",
                    data:JSON.stringify(obj),
                    headers:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                }).then(function (msg) {
                    //创建a标签
                    var a = document.createElement("a");
                    var bodyFa = document.getElementsByTagName("body");//
                    bodyFa[0].appendChild(a);//把创建的节点a 添加到父类body 中;
                    alert(msg.data.msg);
                    a.setAttribute("href", "poi/download?path="+msg.data.msg);//给创建的a标签设置href值;
                    a.click();
                    bodyFa[0].removeChild(a);
                    alert("导出成功");
                    }
                )
            }
        }
    })

    //表的vue组件
    var app=new Vue({
        el:"#app",
        data:{
            tableData:[], //表格数据
            currentPage:1,//当前从第几页开始分页   pageNum
            pagesize:10,//每页显示多少条记录 limit
            total:0,   //查询到的总条数
            multipleSelection:[], //被选中的列数据
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            collection(row){
              //清空数组
                this.multipleSelection=[];
              //给组件赋值
                this.multipleSelection.push(row);
                txt.uid=row.userid;
                //调用方法
                txt.showuid();
            },
            handleClick(row) {
                //创建a标签将当前行订单数据发送后台
                var a = document.createElement("a");
                var bodyFa = document.getElementsByTagName("body");//
                bodyFa[0].appendChild(a);//把创建的节点a 添加到父类body中;
                a.setAttribute("href", "detail/getrow?orderid="+row.orderid);//给创建的a标签设置href值;
                a.click();
                bodyFa[0].removeChild(a);
            },
            formatter(row, column) {
                var t=new Date(row.orderTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
                return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();
            },
            handleSizeChange(val){
                app.pagesize=val;
                app.currentPage=1;
                //触发查询方法
                this.search();
            },
            handleCurrentChange(val){
                this.currentPage=val;
                //触发查询方法
                this.search();
            },
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },
            //定义查询方法
            search(){
                //得到查询条件
                txt.inp["pageNum"]=this.currentPage;
                txt.inp["limit"]=this.pagesize;
                txt.inp["status"]=2;
                txt.inp["level"]="e";
                //触发axios
                axios({
                    url:"loan/getLoans",
                    method:"post",
                    data:JSON.stringify(txt.inp),
                    headers:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                }).then(
                    function (msg) {
                        //给表格赋值
                        app.tableData=msg.data.data;
                        //赋值总数
                        app.total= parseInt(msg.data.msg);

                    }
                );

                //查询催收人信息
                axios({
                        url:"loan/getusers",
                        method:"get",
                    }
                ).then(function (msg) {
                    //给表格赋值
                    txt.users=msg.data.data;
                })
            }

        },

        created:function () {
            //触发查询
            this.search();
        }

    })


</script>
</html>